<template>
  <v-content>
    <div class="mw-row-spacebetween-style mw-main-background-white" style="position:fixed;top:0;left:0;width: 3.45rem;height:0.6rem;padding: 0 0.15rem;align-items: center">
      <div class="mw-row-spacebetween-style mw-main-background-white" style="width: 2.86rem;height:0.4rem;padding:0 0.1rem;border-radius:0.12rem;border:1px solid rgba(222,222,222,1);align-items: center">
        <div class="mw-row-style" style="align-items: center">
          <img src="/static/search_icon.png" style="height:0.14rem;width:0.14rem;margin-right: 0.1rem"/>
          <input type="text" autofocus="autofocus" id="searchkeyword" class="menu-input"  placeholder="搜得不准是诚意不够"  v-model="data.searchkeyword"/>
        </div>
        <img @click="data.deleteSearchkeyword()" src="/static/delete.png" style="width:0.14rem;height:0.14rem;object-fit: fill"></img>
      </div>
      <div @click="data.dosearch" class="mw-third-text-color" style="font-size: 0.16rem">搜索</div>
    </div>
    <div v-if="data.isSearchResultPage" class='topcategorysearch'>
      <div class='mw-row-style' style='justify-content:center;background-color:#ffffff;height:0.44rem;width:3.75rem;align-items:center;'>
        <div v-for="(item,index) in data.topcategory">
          <div @click="data.changeCategory(item.id)" class='mw-column-style' style='width:0.55rem;height:0.44rem;align-items:center;justify-content: center'>
            <div class="mw-single-line" :class="[item.checked? 'mw-checked' : 'mw-unchecked']" style='z-index:1;width:0.5rem;text-align: center'>{{item.name}}</div>
            <div style="height:0.05rem;width:0.38rem;margin-top:-0.04rem" :style="{backgroundColor:item.checked? '#ffc421' : '#ffffff'}"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!data.isSearchResultPage" class="mw-column-style mw-main-background-white" style="margin-top:0.6rem;width: 3.45rem;padding:0.15rem;">
      <div class="mw-row-spacebetween-style" style="align-items: center;height:0.3rem;width: 100%">
        <div class="mw-first-text-color" style="font-weight: bold;font-size: 0.16rem">历史搜索</div>
        <div @click="data.clearKeyWordList" class="mw-third-text-color" style="font-size: 0.16rem">清空</div>
      </div>
      <div style="display: flex;flex-flow:row wrap;align-items:center;">
        <div @click="data.searchByHistory(item)" v-for="(item,index) in data.keywordlist" class="mw-row-style mw-second-text-color" style="background:rgba(245,245,245,1);
border-radius:0.04rem;margin:0 0.1rem 0.1rem 0;align-items: center;padding:0 0.1rem;height:0.32rem;font-size: 0.13rem;justify-content: center">
          {{item}}
        </div>
      </div>
    </div>

    <v-miaoScroll v-if="data.isSearchResultPage"  :on-refresh="data.onRefresh" :on-getmore="data.onGetmore" :has-next="data.has_next" :showview="data.showview" v-vuet-scroll="{ path: 'search', name: 'content' }" style="background-color:#F5F5F5;margin-top:1.04rem">
      <div  class="mw-column-style">
        <div v-if="data.topid == 0" class="mw-row-spacebetween-style" style="width: 3.55rem;margin-left:0.1rem">
          <div class="mw-column-style">
            <div   v-for="(item,index) in data.list" v-if="index%2==0">
              <v-noteblockitem   :item="item" enter="search" ></v-noteblockitem>
            </div>
          </div>
          <div class="mw-column-style">
            <div  v-for="(item,index) in data.list" v-if="index%2==1">
              <v-noteblockitem   :item="item" enter="search"></v-noteblockitem>
            </div>
          </div>
        </div>
        <div v-if="data.topid == 1" @click.stop="data.skipToSaleDetail(item,index)" v-for="(item,index) in data.list">
          <v-saleitem @receiveClickBuy="data.skipClickBuy" :sale="item" class="mw-main-background-white" ></v-saleitem>
        </div>
        <div v-if="data.topid == 2" v-for="(item,index) in data.list">
          <v-articleitem enter="search"  :detail="item" class="mw-main-background-white" ></v-articleitem>
        </div>
        <div v-if="data.topid == 3"  v-for="(item,index) in data.list">
          <v-goodsitem enter="search" :detail="item" ></v-goodsitem>
        </div>
        <div v-if="data.topid == 4"  v-for="(item,index) in data.list">
          <div @click="data.skipToUserpage(item.id)" class="mw-row-spacebetween-style mw-main-background-white" style="width: 3.45rem;padding:0.15rem;align-items: center" v-for="(item,index) in data.list">
            <div class="mw-row-style" style="align-items: center">
              <img :src="item.avatar== ''? '/static/defalut_avatar.png':item.avatar" style="width:0.5rem;height:0.5rem;border-radius: 0.25rem;object-fit: cover;margin-right:0.1rem"/>
              <div class="mw-column-style" style="width: 2rem">
                <div class="mw-single-line mw-first-text-color" style="width:100%;font-size:0.15rem;margin-bottom:0.04rem;">{{item.name}}</div>
                <div class="mw-single-line mw-third-text-color" style="width:100%;font-size:0.13rem;">{{item.introduce}}</div>
              </div>
            </div>
            <div @click.stop="data.follow(item)" v-if="item.followed == 1" class="mw-focus-button-style">已关注</div>
            <div @click.stop="data.follow(item)" v-else-if="item.followed == 0" class="mw-unfocus-button-style">关注</div>
            <div @click.stop="data.follow(item)" v-else-if="item.followed == 2" class="mw-focuseach-button-style">互相关注</div>
          </div>
        </div>
      </div>
    </v-miaoScroll>
    <!--<div style="height:11rem;background-color: #7e8c8d"></div>-->


  </v-content>


</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'search'}),
      mapRules({store: [{ path: 'search' }],need: [{ path: 'search' }]}),
    ],
    components: {

    },
    data() {
      return {

      }
    },
    methods: {

    },

    created() {

    },

    mounted() {
      var that = this
      this.data.needFetch = true
      window.addEventListener('hashchange', function() {
        if (window.location.href.indexOf("#searchresultpage") != -1) {
          that.data.isSearchResultPage = true
        } else {
          that.data.isSearchResultPage = false
        }
      });
    },

  }
</script>

<style scoped>
  .menu-input{
    font-size: 0.15rem;
    color: #333333;
    width: 2rem;
    border:none
  }
</style>
<style type="text/css">

  input::-webkit-input-placeholder{ /*WebKit browsers*/
    font-size:0.15rem;
    color: #cccccc;
  }


</style>
<style>
  .topcategorysearch {
position:fixed;top:0.6rem;width:3.75rem;overflow-x: scroll;background-color:#ffffff;height:0.44rem;
    background:rgba(255,255,255,1);
    box-shadow:0px 6px 10px 0px rgba(0,0,0,0.04);
  }
  .topcategorysearch::-webkit-scrollbar {
    display: none;
  }

  .mw-checked {
    color:#333333;
    font-weight: bold;
    font-size: 0.13rem;
    line-height: 1.5;
  }
  .mw-unchecked {
    color:#999999;
    font-size: 0.13rem;
    line-height: 1.5;
  }

</style>
